export const show3 = () => {
    return {
      "App.vue":`


      <template>
      <div class="content">
        <show3 />
      </div>
    </template>
    
    <script setup>
    import { ref, reactive, nextTick, onMounted, watch } from "vue";
    import show3 from "./show3.vue";
    
    onMounted(() => {});
    </script>
    
    <style scoped>
    .content {
      width: 100%;
      background: #03286D;
      height: 492px;
      display: flex;
      justify-content: center;
    }
    </style>
    
    
    
      
    
    
      `,
      "src/show3.vue":`

      <template>
      <div
        class="show3Box"
        :style="{
          width: width + 'px',
          height: '100%',
        }"
      >
             <div class="rotateContent">
        <div class="rotateContentText">
          {{title}}
        </div>
            <div v-for="(item,index) in getNums" :key="index" class="rotateItem">
          {{item}}
        </div>
          </div>
      </div>
    </template>
    
    <script setup>
    import {
      ref,
      reactive,
      defineEmits,
      onMounted,
      onUpdated,
      computed,
    } from "vue";
    const props = defineProps({
      width: {
        type: Number,
        default: 600,
      },
      height: {
        type: Number,
        default: 600,
      },
      number: {
        type: Number,
        default: 1392,
      },
        title: {
        type: String,
        default:"装配时长(天)",
      },
    });
    const getNums = computed(()=>{
      let data = String(props.number).split('');
      return data
    })
    onUpdated(() => {});
    </script>
    
    <style scoped>
    .show3Box {
      position: relative;
    }
    .rotateContent {
      height: 100%;
      position: relative;
        display: flex;
      align-items: center;
      width: 100%;
    }
    .rotateContentText{
    font-weight: bold;
    font-size: 20px;
    color: #D3E4FE;
    line-height: 60px;
    text-align: center;
    margin-right:10px;
    }
    .rotateItem {
      height: 60px;
      width: 44px;
      margin-right:10px;
      background-image: url(/vue.example/static/numbg.png);
      background-repeat: no-repeat;
      background-position: center;
      background-size: 100% 100%;
      font-weight: bold;
    font-size: 34px;
    color: #D3E4FE;
    line-height: 60px;
    text-align: center;
    font-style: normal;
    text-transform: none;
    }
    </style>
    
      
    
      
      `
    }
   
  };
  